<template>
  <div class="companion-container" v-if="showCompanion">
    <div 
      class="companion-wrapper" 
      :class="{ 'floating': isFloating }"
      @mouseenter="showSpeechBubble = true"
      @mouseleave="showSpeechBubble = false"
      @click="toggleSpeechBubble"
    >
      <!-- 对话气泡 -->
      <div v-if="showSpeechBubble" class="speech-bubble">
        <div class="speech-bubble-content">
          现在是{{ formattedTime }}，有什么需要记录的事件吗？
        </div>
        <div class="speech-bubble-arrow"></div>
      </div>
      
      <!-- 角色图片 -->
      <div class="companion-character" style="cursor: pointer; pointer-events: auto;">
        <img src="/src/assets/person/person_man.png" alt="陪伴角色" class="character-image">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Companion',
  props: {
    show: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isFloating: false,
      floatingInterval: null,
      showSpeechBubble: false,
      timeUpdateInterval: null
    }
  },
  computed: {
    formattedTime() {
      const date = new Date(); // 获取当前时间
      const year = date.getFullYear(); // 年（4位）
      const month = this.padZero(date.getMonth() + 1); // 月（注意：getMonth() 返回 0-11，需+1）
      const day = this.padZero(date.getDate()); // 日
      const hour = this.padZero(date.getHours()); // 时（24小时制）
      const minute = this.padZero(date.getMinutes()); // 分
      const second = this.padZero(date.getSeconds()); // 秒
      // 拼接成目标格式
      console.log('`${year}-${month}-${day} ${hour}:${minute}:${second}`', `${year}-${month}-${day} ${hour}:${minute}:${second}`)
      return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    },
    showCompanion() {
      // 不在StartPage显示
      return this.show && this.$route.path !== '/'
    }
  },
  mounted() {
    // 启动浮动动画
    this.startFloatingAnimation()
  },
  beforeUnmount() {
    // 清理定时器
    if (this.floatingInterval) {
      clearInterval(this.floatingInterval)
    }
  },
  methods: {
    padZero(num) {
      return num < 10 ? '0' + num : num.toString();
    },

    startFloatingAnimation() {
      // 随机浮动效果
      this.floatingInterval = setInterval(() => {
        this.isFloating = !this.isFloating
      }, Math.random() * 3000 + 2000) // 2-5秒随机浮动
    },
    toggleSpeechBubble() {
      // 点击时切换气泡显示状态
      this.showSpeechBubble = !this.showSpeechBubble
    }
  }
}
</script>

<style scoped>
.companion-container {
  position: fixed;
  bottom: 80px; /* 距离底部留出TabBar的空间 */
  right: 20px;
  z-index: 1000; /* 确保在最上层 */
}

.companion-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  transition: transform 0.3s ease-in-out;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.companion-character {
  /* 角色图片容器样式 */
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.character-image {
  width: 100px;
  height: 100px;
  image-rendering: pixelated; /* 保持像素风格 */
  outline: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.floating {
  transform: translateY(-10px);
}

/* 对话气泡样式 */
.speech-bubble {
  position: relative;
  background-color: #fff;
  border-radius: 12px;
  padding: 10px 15px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  max-width: 300px;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  animation: bubbleAppear 0.3s ease-out;
}

.speech-bubble-content {
  word-wrap: break-word;
}

.speech-bubble-arrow {
  position: absolute;
  bottom: -5px;
  right: 20px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #fff;
}

@keyframes bubbleAppear {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>